<template>
    <div id="app">
        <a-modal v-model:visible="visable" :mask-closable="false" title="编辑广告位置" :width="500" @ok="doSubmit"
            @cancel="close">
            <a-spin :spinning="loading" tip="Loading....">
                <a-form ref="appForm" :model="formData" :rules="formRule" :label-col-props="{ span: 6 }"
                    layout="vertical">
                    <a-row :gutter="8">
                        <a-col :span="12">
                            <a-form-item label="位置名称" label-position="top" field="name">
                                <a-input v-model="formData.name" placeholder="请输入位置名称"></a-input>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="8">
                        <a-col :span="8">
                            <a-form-item label="调用数量" label-position="top" field="num">
                                <a-input-number v-model="formData.num" placeholder="输入调用的数量" :min="1" :max="100"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label="图片宽度" label-position="top" field="width">
                                <a-input-number v-model="formData.width" placeholder="图片宽度" :min="1"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="8">
                            <a-form-item label="图片高度" label-position="top" field="height">
                                <a-input-number v-model="formData.height" placeholder="图片高度" :min="1"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { onBeforeMount, ref } from 'vue';
import utils from '@/utils/utils';
import request from '@/config/request';

export default {
    setup(props, { emit }) {
        const visable = ref(false);
        const loading = ref(true);
        const appForm = ref();
        const formData = ref({
            id: ref(''),
            name: ref(''),
            link: ref(''),
            num: ref(5),
            width: ref(),
            height: ref(),
        });
        const formRule = ref({
            name: [{ required: true, message: "请输入名称" }],
            num: [{ required: true, message: "请输入调用图片数量" }]
        });
        const show = (form: any) => {
            visable.value = true;
            if (!form) {
                formData.value.id = "";
            } else {
                formData.value = JSON.parse(JSON.stringify(form));
            }
        };
        const close = () => {
            visable.value = false;
            appForm.value.resetFields();
        };
        const doSubmit = () => {
            appForm.value.validate((valid: any) => {
                loading.value = true;
                request.post(
                    "/platform/advertising/position/save",
                    formData.value
                )
                    .then((ret: any) => {
                        loading.value = false;
                        if (ret.code == 200) {
                            utils.success("操作成功！").then(() => {
                                appForm.value.resetFields();
                                visable.value = false;
                                emit("success");
                            });
                        }
                    })
                    .catch(err => {
                        loading.value = false;
                    });
            });
        }
        return { visable, formRule, formData, location, loading, show, close, doSubmit, appForm };
    }
};
</script>
